<!DOCTYPE html>
<html lang="en-us">

<head>
    <title>免费券扫码</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="favicon.ico" />
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/font-awesome.min.css" rel="stylesheet" />
    <link href="css/default.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap/bootstrap.min.js"></script>
    <!--[if lt IE 9]>
    <script src="js/bootstrap/html5shiv.min.js"></script>
    <script src="js/bootstrap/respond.min.js"></script>
    <![endif]-->
    <!--页面加载进度条-->
    <link href="css/pace/dataurl.css" rel="stylesheet" />
    <script src="js/pace/pace.min.js"></script>
    <script src="js/jquery.scrolltopcontrol/scrolltopcontrol.js" type="text/javascript"></script>
    <script src="js/jquery.extend.js" type="text/javascript"></script>
    <!-- 加载菊花 -->
    <script src="js/spin/spin.js"></script>
    <script src="js/default.js" type="text/javascript"></script>
    <!-- 下拉菜单 -->
    <link href="./css/bootstrap-select/bootstrap-select.min.css" rel="stylesheet" />
    <script src="./js/bootstrap-select/bootstrap-select.min.js"></script>
    <script src="./js/bootstrap-select/i18n/defaults-zh_CN.min.js"></script>
    <script src="./js/bootstrap-select/bootstrap-select-custom.js"></script>
    <!-- 省市区 -->
    <script type="text/javascript" src="./js/cj-pcd/cj-pcd-1.0.1.min.js"></script>
    <style type="text/css">
        .title {
            background: #dfdfdf;
        }

        /* 进度条 */

        .step {
            position: relative;
            vertical-align: top;
            display: inline-block;
            width: 30%;
        }

        .step-head {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            line-height: 31px;
            text-align: center;
            vertical-align: top;
            color: #bfcbd9;
            font-size: 14px;
            border: 2px solid #bfcbd9;
            z-index: 10000;
        }

        .step-main {
            font-size: 15px;
            color: #48576a;
        }

        .step-line {
            position: absolute;
            top: 15px;
            height: 2px;
            left: 32px;
            right: 0px;
            display: inline-block;
            background-color: #bfcbd9;
            z-index: 10000;
        }

        .step-circle {
            margin: auto;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background-color: #ffffff;
            text-align: center;
            padding: -10px 0 0 0;
        }

        .step-index {
            text-align: center;
            position: relative;
            top: -3px;
        }

        .is-sucess>.step-head {
            color: #ffffff;
            border-color: #ffffff;
        }

        .is-sucess>.step-head .step-circle {
            background-color: #00acac;
        }

        .is-sucess>.step-head>.step-line {
            background-color: #00acac;
        }

        .last-sucess>.step-head {
            color: #ffffff;
            border-color: #ffffff;
        }

        .last-sucess>.step-head .step-circle {
            background-color: #00acac;
        }
        .userInfo{
            display: flex;
        }
        .userInfo div{
            flex: 1;
            padding: 30px 0;
        }
        .userInfo div input,select{
            width: 180px;
            height: 30px;
            border: 1px solid #ddd;
            border-radius: 5px;
            outline: none;
        }
        .qrCode{
            display: flex;
            margin: 50px;
        }
        .qrCode li{
            flex: 1;
            list-style-type: none;
            border: 1px solid #dfdfdf;
            border-radius: 5px;
        }
        .qrCode-right{
            margin: 0 20px;
        }
        .qrCode-left div{
            display: flex;
            margin: 20px 20px 0 20px;
            height: 40px;
            line-height: 40px;
        }
        .qrCode-left img{
            margin: 20px 20px 0 20px;
            display: block;
            border-radius: 5px;
        }
        .qrCode-left .fenge-line{
            margin: 0px;
            height: 5px;
            background: #f7a591;
            border-radius: 5px 5px 0 0;
        }
        .qrCode-left div input{
            flex: 1;
            height: 35px;
            border: 1px solid #dfdfdf;
            border-radius: 5px;
        }
        .qrCode-left .left-bottom{
            margin-bottom: 20px;
            display: block;
            text-align: right;
            height: auto;
        }
        .qrCode-left .left-bottom p{
            margin: 0;
        }
        .qrCode-right .fenge-line{
            margin: 0px;
            height: 5px;
            background: #f7a591;
            border-radius: 5px 5px 0 0;
        }
        .qrCode-right img{
            margin: 20px 20px 0 20px;
            height: 240px;
            display: block;
            border-radius: 5px;
        }
        .qrCode-right div{
            margin: 10px 20px 0px 20px;
            display: flex;
        }
        .qrCode-right div:last-child{
            margin-bottom: 20px;
        }
        .qrCode-right div .span-right{
            flex: 1;
        }
        .zhezhao{
            display: none;
            background: #000000;
            opacity: 0.5;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
        }
        #saoMa{
            display: none;
            width: 400px;
            padding: 50px 0;
            border-radius: 5px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            z-index: 2;
            background: #fff;
            text-align: center;
        }
        #saoMa p{
            padding: 0 30px;
        }
        #saoMa div{
            margin-top: 50px;
            text-align: center;
        }
        #saoMa div a{
            cursor: pointer;
            display: inline-block;
            text-decoration:none;
            font-size: 16px;
            color: #fff;
            background: #337ab7;
            width: 80px;
            height: 50px;
            line-height: 50px;
            border-radius: 5px;
            text-align: center;
        }
        #saoMa div .a-left{
            margin-right: 30px;
        }
        /* 进度条结束 */
    </style>
</head>

<body>

    <div class="maincontent row">
        <ul class="qrCode">
            <li class="qrCode-left">
                <div class="fenge-line"></div>
                <div class="left-middle">
                    <span>免费券二维码：</span>
                    <input type="text" id="qrcode_input" onkeydown="qrCode(this)">
                </div>
                <!--<div class="left-top" style="display: none">-->
                    <!--<span>免费券条形码：</span>-->
                    <!--<input type="text" id="scanner_input" onkeydown="qrCode(this)">-->
                <!--</div>-->
                <div class="bloodCard" style="display: none">
                    <span>采血卡：</span>
                    <input type="text" id="bloodCard" onkeydown="sampleCodeClick()">
                </div>
                <div class="left-sampleNum" id="showSampleNum" style="display: none">
                    <span>　　样品编号：</span>
                    <input type="text"  id="scanner_sampleNum" onkeydown="qrNum(this)">
                </div>
                <img src="" alt="" id="couponImg">
                <div class="left-bottom">
                    <p>
                        <span>扫描人：</span>
                        <span id="scanner_name"></span>
                    </p>
                    <p>
                        <span id="scanner_time"></span>
                    </p>
                </div>
            </li>
            <li class="qrCode-right">
                <div class="fenge-line"></div>
                <img src="" alt="" id="cardImg">
                <div>
                    <span class="span-left">姓　　名：</span><span class="userName span-right"></span>
                </div>
                <div>
                    <span class="span-left">性　　别：</span><span class="userSex span-right"></span>
                </div>
                <div>
                    <span class="span-left">证件号码：</span><span class="userId span-right"></span>
                </div>
                <div>
                    <span class="span-left">地　　址：</span><span class="userAddress span-right"></span>
                </div>
            </li>
        </ul>
    </div>
    <div class="zhezhao"></div>
    <div id="saoMa">
        <p id="couponName"></p>
        <div>
            <a class="a-left" onclick="commit()">确认</a>
            <a class="a-right" href="javascript:location.reload();">取消</a>
        </div>
    </div>
<script>
    //获取当前登录用户信息
    $(document).ready(function () {
        $.ajax({
            method: 'POST',
            url: '/csfy/intf.do',
            data: { method: 'getLoginUserInfo' },
            success: res => {
                if (res.code == 10086) {
                    alert("请重新登录！");
                } else {
                    if (res.code == 200) {
                        $(".username").html(res.rows.userName);
                    }
                }
            }
        })
    });
    var productCode = "";
    //确认二维码扫码
    function commit() {
        var url = '/csfy/intf.do?method=scannerCoupon&couponNum=' + couponNum +'&type=' + type ;
        $.ajax({
            method: 'post',
            url: url,
            dataType: "json",
            data: {},
            success:   function (data){
                $(".zhezhao").hide();
                $("#saoMa").hide();
                var cardImgBase64;
                if (data.rows == undefined) {
                    alert(data.msg);
                    return;
                }
                if(data.rows.cardImg != undefined){
                    $.ajax({
                        url:'/csfy/coupon/getPicForGc.do',
                        type:'GET',
                        data:{fileName:data.rows.cardImg},
                        dataType: 'json',
                        async:false,
                        success:function (result) {
                            cardImgBase64 = result;
                        }
                    });
                }
                if(data.code==='200'){
                    if(data.rows.productCode == 'BS0002' || data.rows.productCode =="DX0459"){
                        productCode = data.rows.productCode;
                        $(".bloodCard").show();
                        $("#bloodCard").focus();
                    }
                    $("#couponImg").attr('src',data.rows.couponImg);
                    $("#cardImg").attr('src','data:'+'image/jpeg'+';base64,'+cardImgBase64);
                    $("#scanner_name").text(data.rows.loginName);
                    $("#scanner_time").text(data.rows.scannerTime);
                    $(".userName").text(data.rows.name);
                    $(".userSex").text(data.rows.sex);
                    $(".userId").text(data.rows.cardId);
                    $(".userAddress").text(data.rows.addr);

//                        if(data.rows.isShow == '0'){$("#showSampleNum").show();}
                    $("#scanner_sampleNum").focus();
//                        $("#qrcode_input").attr("readonly","readonly");

                }else {
                    if (data.rows.productCode != undefined || data.rows.productCode != null) {
                        if (data.rows.productCode == 'BS0002' || data.rows.productCode == "DX0459") {
                            if (data.rows.bloodCode == '' || data.rows.bloodCode == undefined || data.rows.bloodCode == null) {
                                productCode = data.rows.productCode;
                                $(".bloodCard").show();
                                $("#bloodCard").focus();
                                $("#couponImg").attr('src', data.rows.couponImg);
                                $("#cardImg").attr('src', 'data:' + 'image/jpeg' + ';base64,' + cardImgBase64);
                                $("#scanner_name").text(data.rows.loginName);
                                $("#scanner_time").text(data.rows.scannerTime);
                                $(".userName").text(data.rows.name);
                                $(".userSex").text(data.rows.sex);
                                $(".userId").text(data.rows.cardId);
                                $(".userAddress").text(data.rows.addr);
                            } else {
                                $("#couponImg").attr('src', data.rows.couponImg);
                                $("#cardImg").attr('src', 'data:' + 'image/jpeg' + ';base64,' + cardImgBase64);
                                $("#scanner_name").text(data.rows.loginName);
                                $("#scanner_time").text(data.rows.scannerTime);
                                $(".userName").text(data.rows.name);
                                $(".userSex").text(data.rows.sex);
                                $(".userId").text(data.rows.cardId);
                                $(".userAddress").text(data.rows.addr);
                                alert(data.msg);
                            }
                        } else {
                            alert(data.msg);
                        }
                    } else {
                        alert(data.msg);
                    }
                }
            },
            error: function (err) {
                alert('网络错误!');
            }
        });
    }

    var couponNum  ;
    var type;
    function qrCode(obj) {//给输入框绑定按键事件
        if(event.keyCode == "13") {//判断如果按下的是回车键则执行下面的代码

            $("#showSampleNum").hide();
            $("#scanner_sampleNum").val("");
            var code = $("#qrcode_input").val();
                if (code.indexOf("csfy/wx/checkQRUser.do?couponNum=") > 0) {
                    couponNum = code.substring(code.lastIndexOf("couponNum") + 10);
                    $("#qrcode_input").val(couponNum);
                    type = "code";
                } else {
                    if (parseInt(code.length) == 12) {
                        couponNum = code;
                        type = "code";
                    } else {
                    couponNum = code;
                    type = "bar";
                }
            }
            $.ajax({
                method: 'post',
                url: "/csfy/wx/getCouponInformation.do",
                dataType: "json",
                data: {
                    couponNum: couponNum
                },
                success : function(dataInfo) {
                    if(dataInfo.code == 200){
                        var isCharge = "免费";
                        if (dataInfo.rows.isCharge == "2") {
                            isCharge = "自费"
                        }
                        var showInfo = "当前扫描类型为： " + '<span style="color: red;font-size: 25px">' + dataInfo.rows.couponBaseName + '</span> - <span style="color: red;font-size: 18px">' + isCharge + '</span> - 领券人：<span style="color: red;font-size: 18px">'+dataInfo.rows.name +'</span>' + " ,请确认是否扫码";
                        $("#couponName").html(showInfo);
                        $(".zhezhao").show();
                        $("#saoMa").show();
                    }else {
                        alert(dataInfo.msg);
                    }
                }
            });
        }
    }

    //扫采血卡的条形码
    function sampleCodeClick() {
        if(event.keyCode == "13") {//判断如果按下的是回车键则执行下面的代码
            if(($("#bloodCard").val().length != 11 && productCode == "BS0002") || ($("#bloodCard").val().length != 10 && productCode == "DX0459")){
                alert("当前扫描条形码为：" + $("#bloodCard").val() + ",长度有误，请重新扫描采血卡");
                return false;
            }
            $.ajax({
                type:"get",
                url:"/csfy/wx/scanCouponCodeBoundBarCode.do",
                data:{
                    couponNum:couponNum,
                    bloodCode:$("#bloodCard").val()
                },
                async:true,
                success : function(data) {
                    var dataInfo = JSON.parse(data);
                    if(dataInfo.code == 200){
                        alert(dataInfo.rows);
                        $(".bloodCard").hide();
                        $("#qrcode_input").focus();
                        $("#bloodCard").val("");
                    }else {
                        alert(dataInfo.msg);
                    }
                }
            })
        }
    }

    function qrNum() {
        if(event.keyCode == "13") {
            var coupon = $("#qrcode_input").val();
            var bar = $("#bar").val();
            var sampleNum = $("#scanner_sampleNum").val();
            if(sampleNum.length == 0){
                alert("请输入样品编号");
                return false;
            }
            var url = '/csfy/intf.do?method=scannerSampleNum&coupon=' + coupon + '&sampleNum=' + sampleNum + '&bar=' + bar;
            $.ajax({
                method: 'post',
                url: url,
                dataType: "json",
                success: function (data) {
                    if (data.code === '200') {
                        alert("操作成功");
                        $("#showSampleNum").hide();
                        $("#qrcode_input").removeAttr("readonly");
                    } else {
                        alert(data.msg);
                    }
                },
                error: function (err) {
                    alert('网络错误!');
                }
            });
        }
    }
</script>
</body>

</html>